<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>
    <link rel="stylesheet" href="lib/reset.css">
    <link rel="stylesheet" href="lib/details.css">
    <link rel="stylesheet" href="lib/download/font_2136775_qhlyqf2gm9/iconfont.css">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
</head>

<body>
    <div class="header">
        <img src="img/logo.png" alt="">
        <ul class="nav">
            <li>新品</li>
            <li>女士</li>
            <li>男士</li>
            <li>礼物</li>
            <li>线上专享</li>
        </ul>
        <ul class="header-list">
            <li>
                <span class="iconfont icon-kefu
                                "></span>
            </li>
            <li>
                <span class="iconfont icon-sousuo
                                "></span>
            </li>
            <li>
                <span class="iconfont icon-wo
                                " id="send"></span>
            </li>
            <li>
                <span class="iconfont icon-baobao
                                "></span>
            </li>
        </ul>
    </div>

    <div id="box1">
        <div class="box1-content">
            <ul class="first">
                <li>全新女士商品</li>
                <li>浏览所有全新女士商品</li>
                <li>手袋</li>
                <li>钱包</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="two">
                <li>全新男士商品</li>
                <li>浏览所有全新男士商品</li>
                <li>手袋</li>
                <li>服饰</li>
                <li>鞋履</li>
                <li>配饰</li>
            </ul>
            <ul class="three">
                <li>女士潮流趋势</li>
                <li>秋季精选</li>
                <li>经典风格</li>
                <li>白色甄选</li>
                <li>热卖甄选</li>
            </ul>
            <ul class="four">
                <li>男士潮流趋势</li>
                <li>Pacer系列</li>
                <li>商务精选</li>
                <li>型男必备</li>
                <li>旅行商品</li>
            </ul>
            <ul class="five">
                <li>特色专题</li>
                <li>COACH X JENNIFER LOPEZ</li>
                <li>COACH X JEAN-MICHEL BASQUIAT</li>
                <li>Coach Originals</li>
                <li>Dream It Real</li>
                <li>Horse and Carriage</li>
                <li>十年历程，时刻铭记</li>
            </ul>
            <img src="img/1.png" alt="">
        </div>
    </div>
    <div id="box2">
        <div class="box2-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>单肩包</li>
                <li>手提包</li>
                <li>斜挎包</li>
                <li>大手袋</li>
                <li>手拿包</li>
                <li>背包</li>
            </ul>
            <ul>
                <li>钱包&手腕包</li>
                <li>浏览所有钱包&手腕包</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>小号钱包</li>
                <li>手腕包</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>上衣</li>
                <li>外套</li>
                <li>连衣裙</li>
                <li>半身裙和裤子</li>
                <li>帽子、手套和围巾</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>平底鞋</li>
                <li>运动鞋</li>
                <li>靴子</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>钥匙链&挂件</li>
                <li>太阳眼镜</li>
                <li>时尚首饰</li>
                <li>护理产品</li>
                <li>手表</li>
                <li>皮带</li>
                <li>香水</li>
            </ul>
            <ul>
                <li>产品系列</li>
                <li>Alie系列</li>
                <li>Charlie系列</li>
                <li>Hutton系列</li>
                <li>Rambler系列</li>
                <li>Riley系列</li>
                <li>Tabby系列</li>
                <li>Tote系列</li>
                <li>Willis系列</li>
            </ul>
        </div>
    </div>
    <div id="box3">
        <div class="box3-content">
            <ul>
                <li>手袋</li>
                <li>浏览所有手袋</li>
                <li>公事包</li>
                <li>腰包</li>
                <li>背包</li>
                <li>信使包</li>
            </ul>
            <ul>
                <li>钱包和卡袋</li>
                <li>浏览所有钱包和卡袋</li>
                <li>大号钱包</li>
                <li>中号钱包</li>
                <li>卡袋</li>
            </ul>
            <ul>
                <li>服饰</li>
                <li>浏览所有服饰</li>
                <li>外套</li>
                <li>男士成衣</li>
            </ul>
            <ul>
                <li>鞋履</li>
                <li>浏览所有鞋履</li>
                <li>CitySole</li>
                <li>休闲鞋</li>
                <li>运动鞋</li>
            </ul>
            <ul>
                <li>配饰</li>
                <li>浏览所有配饰</li>
                <li>其他配件</li>
                <li>皮带</li>
                <li>手表</li>
                <li>香水</li>
                <li>太阳眼镜</li>
            </ul>
        </div>
    </div>
    <div id="box4">
        <div class="box4-content">
            <ul>
                <li>女士礼物</li>
                <li>浏览所有女士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <ul>
                <li>男士礼物</li>
                <li>浏览所有男士礼物</li>
                <li>3500元以下</li>
                <li>3500元-5000元</li>
                <li>奢华礼物</li>
                <li>热卖商品</li>
            </ul>
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
        </div>
    </div>
    <div id="box5">
        <div class="box5-content">
            <div class="txt">
                <span>手袋</span>
                <span>钱包</span>
            </div>
            <img src="img/4.png" alt="">
        </div>
    </div>
    <div class="wrap">
        <div class="wrap-content">
            <div class="photo">
                <img src="" alt="" id="bigimg">
                <div id="mask"></div>
                <div class="bigwrap">
                    <img src="" alt="" id="newbigimg">
                </div>
            </div>
            <h3>商品评价:</h3>
            <div class="scores">
                <ul class="star">
                    <li index="0"></li>
                    <li index="1"></li>
                    <li index="2"></li>
                    <li index="3"></li>
                    <li index="4"></li>
                </ul>
                <span class="words"></span>
            </div>

            <div class="shopInfo">
                <p id="title"></p>
                <span class="pri">￥&nbsp;</span>
                <span id="price"></span><br>
                <span class="color">黑色</span>
                <p id="txt"></p>
                <img src="" alt="" id="smallimg">
                <span class="chat">
                     <img src="img/weixin.png" alt="" class="weixin">
                </span>
                <span class="bo">
                  <img src="img/weibo.png" alt="" class="weibo">
              </span>
                <p id="addShop">加入购物车</p>
                <p id="buy">立即购买</p>
                <p class="bot">退换货信息</p>
            </div>
        </div>
    </div>

    <div class="introduce">
        <div class="introduce-content" id="content">
            <div class="tem">
                <img src="img/tem.jpg" alt="">
            </div>
            <div id="present">
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <ul>
                    <li>网站与精品店</li>
                    <li>查找精品店</li>
                    <li>网站导航</li>
                    <li>使用条款</li>
                    <li>安全与隐私</li>
                </ul>
                <ul>
                    <li>客户服务</li>
                    <li>关于订单</li>
                    <li>关于产品</li>
                    <li>VIP会籍招募条件</li>
                    <li>联系我门</li>
                </ul>
                <ul>
                    <li>关于COACH</li>
                    <li>公司信息</li>
                    <li>TAPESTRY</li>
                    <li>职业招聘</li>
                </ul>
                <ul>
                    <li>关注COACH</li>
                    <li>官方微博</li>
                    <li>官方微信</li>
                    <img src="img/erweima.png" alt="">
                    <li>关注COACH官方微信</li>
                    <li>获取电子会员卡及微信</li>
                    <li>专属礼遇</li>
                </ul>
                <ul>
                    <li>获取COACH新讯</li>
                    <li>
                        <input type="text" placeholder="电子邮箱*">
                    </li>
                    <li>
                        <input type="text" placeholder="确认电子邮箱*">
                    </li>
                    <li>您已经注册并同意接受COACH邮件，您可以随时取消订阅。</li>
                    <li>阅读<u>安全与隐私政策</u>或<u>联系我们</u>获取更多信息。</li>
                    <li>
                        加入我们
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; THE ESTATE OF RICHARD BERNSTEIN</p>
            <p>&copy; 2020 COACH IP HOLDINGS LLC. COACH, COACH SIGNATURE C DESIGN, COACH & TAG DESIGN, COACH HORSE & CARRIAGE DESIGN ARE REGISTERED TRADEMARKS OF COACH IP HOLDINGS LLC.</p>
            <span>泸ICP备0906012号-1,</span>
            <img src="img/wron1.png" alt="">
            <span>上海工商</span><br>
            <img src="img/wron2.png" alt="">
            <span>泸公网备31010602000942</span>
        </div>
    </div>
    <div class="fix">
        <span class="iconfont icon-kefu"></span>
    </div>

    <div class="shopCar">
        <div id="shop-mask"></div>
        <div id="pop">
            <div class="pop-header">
                <input type="checkBox" class="check" checked>
                <span>全选</span>
                <h2>我的购物袋</h2>
                <p>继续购物</p>
            </div>
            <div class="pop-center">
                <div class="shopping">
                    <img src="img/close.png" alt="" id="close">
                    <input type="checkBox" class="taskCheck" checked>
                    <img src="" alt="" id="shopImg">
                    <div class="task">
                        <p id="shopTitle"></p>
                        <span>颜色：卡其色</span><br>
                        <button id="remove">－</button>
                        <span id="num">0</span>
                        <button id="sum">+</button><br>
                        <span>￥</span>
                        <span id="taskPrice"></span>
                        <span class="whole">总价&nbsp;￥</span>
                        <span id="taskTotal">0</span>
                    </div>
                </div>
                <p class="pop-bot">
                    畅销星品，低至5折，现货立抢！
                </p>
            </div>
            <div class="pop-paper">
                <input type="text" placeholder="请输入优惠券代码">
                <span>确认</span>
            </div>
            <div class="pop-footer">
                <span class="iconfont icon-kefu"></span>
                <span class="com">总计：￥&nbsp;</span>
                <span id="totalPrice">0</span>
                <span id="computed">立即结算</span>
                <span class="prev">(</span>
                <span id="cot">0</span>
                <span class="next">)</span>
            </div>
        </div>
    </div>



    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>


    <script>
        String.prototype.parseUrl = function() {
            let arr = this.slice(this.indexOf("?") + 1).split("&");
            let result = {};
            arr.forEach(item => {
                let key = item.split("=")[0];
                let value = item.split("=")[1];
                result[key] = value;
            })
            return result;
        }

        $.ajax({
            url: `${address}/details`,
            data: {
                id: location.href.parseUrl().id
            },
            success(data) {
                $("#title").html(data.title);
                $("#bigimg").attr("src", data.img);
                $("#smallimg").attr("src", data.img);
                $("#price").html(data.price);
                $("#txt").html(data.txt);
                $("#present").html(data.content);
                $("#newbigimg").attr("src", data.img);
                $("#shopImg").attr("src", data.img);
                $("#shopTitle").html(data.title);
                $("#taskPrice").html(data.price);
            }
        })


        //放大镜
        let photo = document.querySelectorAll(".photo")[0];
        let mask = document.getElementById("mask");
        let bigwrap = document.querySelectorAll(".bigwrap")[0];
        let newbigimg = document.getElementById("newbigimg");

        //鼠标移入大图
        photo.onmouseenter = function() {
            mask.style.display = "block";
            bigwrap.style.display = "block";
        }

        //鼠标离开大图
        photo.onmouseleave = function() {
            mask.style.display = "none";
            bigwrap.style.display = "none";
        }

        //遮罩层跟随鼠标移动
        photo.onmousemove = function(event) {
            let point = {
                x: event.clientX - 60,
                y: event.clientY + 60
            }
            mask.style.left = point.x - mask.offsetWidth / 2 + "px";
            mask.style.top = point.y - mask.offsetHeight / 2 + "px";

            newbigimg.style.left = -((point.x * 2) - (mask.offsetWidth / 2 * 2)) + "px";
            newbigimg.style.top = -((point.y * 2) - (mask.offsetHeight / 2 * 2)) + "px";

            if (parseInt(mask.style.left) < 0) {
                mask.style.left = 0;
                newbigimg.style.left = 0;
            }
            if (parseInt(mask.style.top) < 0) {
                mask.style.top = 0;
                newbigimg.style.top = 0;
            }
            if (parseInt(mask.style.left) > photo.offsetWidth - mask.offsetWidth) {
                mask.style.left = photo.offsetWidth - mask.offsetWidth + "px";
            }
            if (parseInt(mask.style.top) > (photo.offsetHeight - mask.offsetHeight)) {
                mask.style.top = photo.offsetHeight - mask.offsetHeight + "px";
            }
        }


        //五星好评
        let liList = document.querySelectorAll(".star li");
        let words = document.querySelectorAll(".words")[0];
        let score = 0; //记录分数
        let wordsArr = ["很差", "凑合吧", "一般般", "挺好的", "超级棒"];

        for (let i = 0; i < liList.length; i++) {
            //鼠标经过事件
            liList[i].onmouseenter = function() {
                for (let j = 0; j < liList.length; j++) {
                    liList[j].className = "";
                }
                let index = this.getAttribute("index");
                for (let i = 0; i <= index; i++) {
                    liList[i].className = "light";
                }
            }

            //鼠标离开事件
            liList[i].onmouseleave = function() {
                for (let i = 0; i < liList.length; i++) {
                    liList[i].className = "";
                }
                for (let i = 0; i < score; i++) {
                    liList[i].className = "light";
                }
            }

            //鼠标单击事件
            liList[i].onclick = function() {
                score = Number(this.getAttribute("index")) + 1;
                words.innerHTML = wordsArr[score - 1];
            }
        }

        // 关闭商品购物车
        $("#close").click(function() {
            $(".shopCar").fadeOut();
        })

        $("#addShop").click(function() {
            $(".shopCar").fadeIn();
        })

        //加号点击事件
        $("#sum").click(function() {
            let result = Number($("#num").html()) + 1;
            $("#num").html(result);
            $("#cot").html(result);
            let total = String(Number($("#taskPrice").html()) * Number($("#num").html()));
            $("#totalPrice").html(total);
            $("#taskTotal").html(total);
        })

        //减号点击事件
        $("#remove").click(function() {
            if (Number($("#num").html()) <= 0) {
                return;
            }
            let last = Number($("#num").html()) - 1;
            $("#num").html(last);
            $("#cot").html(last);
            let total = String(Number($("#taskPrice").html()) * Number($("#num").html()));
            $("#totalPrice").html(total);
            $("#taskTotal").html(total);
        })

        //发送结算购物车请求
        $("#computed").click(function() {
            let name = $("#shopTitle").html();
            let count = $("#num").html();
            let totalprice = $("#taskTotal").html();
            if (count !== "0" && totalprice !== "0") {
                $.ajax({
                    url: `${address}/addShop`,
                    data: {
                        id: location.href.parseUrl().id,
                        name,
                        count,
                        totalprice
                    },
                    success(data) {
                        alert("添加成功");
                    }
                })

                //发送编辑购物车的请求
                $.ajax({
                    url: `${address}/editShop`,
                    data: {
                        id: location.href.parseUrl().id,
                        count: $("#num").html(),
                        totalprice: $("#totalPrice").html()
                    },
                    success(data) {
                        location.href = `${address}/compute.html?id=${location.href.parseUrl().id}`;
                    }
                })
            } else {
                alert("请重新选购商品");
            }
        })


        //查找订单数据库
        $.ajax({
            url: `${address}/getShop`,
            success(data) {
                console.log(data)
            }
        })

        //立即购买
        // $("#buy").click(function() {
        //     location.href = `${address}/compute.html?id=${location.href.parseUrl().id}`;
        // })

        $("#shop-mask").click(function() {
            $(".shopCar").fadeOut();
        })



        let li1 = $(".nav li").eq(0);
        let li2 = $(".nav li").eq(1);
        let li3 = $(".nav li").eq(2);
        let li4 = $(".nav li").eq(3);
        let li5 = $(".nav li").eq(4);
        li1.mouseenter(function() {
            $("#box1").show();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box1").mouseleave(function() {
            $("#box1").hide();
        })
        li2.mouseenter(function() {
            $("#box2").show();
            $("#box1").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box2").mouseleave(function() {
            $("#box2").hide();
        })
        li3.mouseenter(function() {
            $("#box3").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box3").mouseleave(function() {
            $("#box3").hide();
        })
        li4.mouseenter(function() {
            $("#box4").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box5").hide();
        })
        $("#box4").mouseleave(function() {
            $("#box4").hide();
        })
        li5.mouseenter(function() {
            $("#box5").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
        })
        $("#box5").mouseleave(function() {
            $("#box5").hide();
        })
    </script>
</body>

</html>